<style lang='less'>

</style>

<template>
    <div>
        <Row>
        <Col span="24">
            <Form ref="typeinfo" :model="typeinfo">
                <FormItem>
                    <Row>
                        <Col span="6" offset="1">
                            <span style="text-al">流程环节名称：</span>
                            <Input type="text" v-model="info_name" placeholder="输入流程环节名称" style="width: 60%;" ></Input>
                        </Col>
                        <Col span="10">
                            流程类型：
                            <Select v-model="type_id" style="width:200px">
                                <Option v-for="item in typeDataAll" :value="item.id" :key="item.id">{{ item.type_name }}</Option>
                            </Select>
                            </Col>
                        <Col span="2" offset="3">
                            <Button @click="selectType(1)" type="info">查询</Button>
                        </Col>
                        <Col span="2">
                            <Button @click="modal1 = true" type="success">添加</Button>
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </Col>
        </Row>
        <Row>
        <Table border :columns="columns" :data="infoData"></Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <div style="float: right;margin-top: 10px">
            <Page :total="pageData.totalRecord" show-sizer show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
        </div>
        </Row>
        <row>
            <Modal
                v-model="modal1"
                title="流程环节管理"
                @on-ok="save"
                @on-cancel="cancel">
                <Form ref="savetypeinfo" :model="savetypeinfo">
                    <FormItem>
                        <Row>
                            <Col span="10" offset="1">
                                流程环节名称:<Input type="text" v-model="savetypeinfo.info_name" placeholder="输入流程环节名称"></Input>
                            </Col>
                        </Row>
                        <Row style="margin-top:30px">
                            <Col span="10" offset="1">
                                流程环节标识:<Input type="text" maxlength="300" v-model="savetypeinfo.info_key" placeholder="输入流程环节标识:"></Input>
                            </Col>
                        </Row>
                        <Row style="margin-top:30px">
                            <Col span="10" offset="1">
                            流程类型:
                            <Select v-model="savetypeinfo.type_id" style="width:200px">
                                <Option v-for="item in typeData" :value="item.id" :key="item.id">{{ item.type_name }}</Option>
                            </Select>
                            </Col>
                        </Row>
                        <Row style="margin-top:30px">
                          <Col span="23" offset="1">
                            是否启用:
                          </Col>
                            <Col span="10" offset="1">
                              <RadioGroup v-model="savetypeinfo.is_show" type="button">
                                <Radio label="启用"></Radio>
                                <Radio label="禁用"></Radio>
                            </RadioGroup>
                            </Col>
                        </Row>
                        <Row style="margin-top:30px">
                          <Col span="10" offset="1">
                            流程环节说明:<Input type="textarea" maxlength="300" v-model="savetypeinfo.remark" placeholder="输入流程环节备注"></Input>
                          </Col>
                        </Row>
                    </FormItem>
                </Form>
            </Modal>
        </row>
        <row>
            <Modal
                v-model="modal2"
                @on-ok="del"
                @on-cancel="cancel2">
                <h1>是否删除？</h1>
            </Modal>
        </row>
    </div>
</template>

<script>
import { insertProcessInfo, deleteProcessInfo, updateProcessInfo, findProcessInfoList, findProcessTypeAllList } from '@/api/eventlist'
export default {
  name: 'processtype',
  components: {
  },
  data () {
    return {
      loadData: true,
      pageData: {
        totalRecord: 0,
        pageSize: 10,
        pageNo: 1
      },
      typeinfo: {},
      savetypeinfo: {},
      info_name: '',
      type_id: '',
      typeData: [],
      typeDataAll: [],
      infoData: [],
      columns: [
        { title: '编号', key: 'id' },
        { title: '环节名称', key: 'info_name' },
        { title: '环节标识', key: 'info_key' },
        { title: '类型名称', key: 'type_name' },
        { title: '创建时间', key: 'create_time' },
        { title: '状态', key: 'is_show' },
        { title: '操作',
          key: 'action',
          align: 'center',
          width: 150,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showmodal1(params.row)
                  }
                }
              }, '编辑')
            )
            temp.push(
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showmodal2(params.row)
                  }
                }
              }, '删除')
            )
            return h('div', temp)
          }
        }
      ],
      modal1: false,
      modal2: false,
      delid: ''
    }
  },
  methods: {
    pageChange (ret) {
      console.log(ret)
      this.pageData.pageNo = ret
      this.getApiData()
    },
    pageSizeChange (ret) {
      this.pageData.pageSize = ret
      this.getApiData()
    },
    selectType (pageNo) {
      this.pageData.pageNo = pageNo
      this.getApiData()
    },
    cancel () {
      this.savetypeinfo = {}
    },
    showmodal1 (params) {
      console.log(3333)
      this.savetypeinfo.id = params.id
      this.savetypeinfo.info_name = params.info_name
      this.savetypeinfo.info_key = params.info_key
      this.savetypeinfo.remark = params.remark
      this.savetypeinfo.is_show = params.is_show
      this.savetypeinfo.type_id = params.type_id
      this.modal1 = true
    },
    showmodal2 (params) {
      this.delid = params.id
      this.modal2 = true
    },
    cancel2 () {
      this.delid = ''
    },
    del () {
      let params = {
        id: this.delid
      }
      deleteProcessInfo(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功' })
          this.selectType(1)
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
      this.delid = ''
    },
    save () {
      let is_show = this.savetypeinfo.is_show === '启用' ? '1' : '0'
      let params = {
        id: this.savetypeinfo.id,
        info_name: this.savetypeinfo.info_name,
        info_key: this.savetypeinfo.info_key,
        type_id: this.savetypeinfo.type_id,
        remark: this.savetypeinfo.remark,
        is_show: is_show
      }
      let url = ''
      if (this.savetypeinfo.id) {
        url = updateProcessInfo
      } else {
        url = insertProcessInfo
      }
      url(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.savetypeinfo = {}
          this.$Notice.success({ title: '成功' })
          this.selectType(1)
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    },
    getApiData () {
      let params = {
        pageSize: this.pageData.pageSize,
        pageNo: this.pageData.pageNo,
        info_name: this.info_name,
        type_id: this.type_id
      }
      findProcessInfoList(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.infoData = ret.data.data.results
          this.loadData = false
          console.log(ret.data.totalRecord)
          this.pageData = {
            totalRecord: ret.data.data.totalRecord,
            pageSize: ret.data.data.pageSize,
            pageNo: 1
          }
          console.log(this.pageData)
        } else {
          this.loadData = true
          this.$Notice.error({ title: '查询列表失败', desc: ret.data.errmsg })
        }
      })
    },
    getAllTypeData () {
      findProcessTypeAllList().then(ret => {
        if (ret.data.errcode === 0) {
          this.typeData = ret.data.data
          this.typeDataAll = JSON.parse(JSON.stringify(ret.data.data))
          this.typeDataAll.splice(0, 0, { 'id': '', 'type_name': '全部' })
        } else {
          this.loadData = true
          this.$Notice.error({ title: '查询类型列表失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.getApiData()
    this.getAllTypeData()
  }
}
</script>

<style>

</style>
